<template>
  <div>
    <!-- 图片 -->
    <img :src="item.product_picture" alt="" class="img" />
    <p class="pa1">{{ item.product_title }}</p>
    <p class="pa2">{{ item.product_name }}</p>
    <p class="pa3">
      <span>{{ item.product_selling_price }}</span>
      <span class="s1">{{ item.product_price }}</span>
    </p>
  </div>
</template>
<script>
export default {
  props: ["item"],
};
</script>
<style scoped>
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6c4;
}
.d1 {
  margin-top: 50px;
  width: 100%;
  height: 30px;
}
.box1 {
  width: 100%;
  background: #f5f4f6;
}
.box {
  width: 90%;
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
}
.da {
  padding-top: 60px;
  width: 100%;
  display: flex;
}
.db {
  width: 17%;
  height: 600px;
  display: inline-block;
  display: flex;
}
.dc {
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  width: 82.5%;
  height: 670px;
}
.dc1 {
  width: 17.5%;
  background: #ffffff;
  margin-left: 2.5%;
  margin-bottom: 20px;
  height: 320px;
}
.im {
  width: 100%;
  height: 100%;
}
.img {
  width: 100%;
  height: 62%;
}
.s1 {
  margin-left: 5.5%;
  color: #99a9bf;
  text-decoration: line-through;
}
.dc1:hover {
  width: 17.5%;
  background: #ffffff;
  margin-left: 2.5%;
  margin-bottom: 20px;
  height: 320px;
  box-shadow: 2px 2px 10px #cfcfcf, 5px 5px 20px #000;
}
p {
  margin: 0;

  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  margin: auto;
  width: 90%;
  margin-top: 5%;
}

.pa1 {
  color: #000;
}
.pa2 {
  color: #99a9bf;
}
.pa3 {
  color: red;
}
</style>